<template>
  <div>
    <!-- header区域 -->
    <header class="category-header wrap">
      <i class="iconfont icon-left"
         @click="gohome"></i>
      <div class="header-search">
        <i class="iconfont icon-search"></i>
        <span class="search-title"
              to="./search">11.11随心所欲Go</span>
      </div>
      <i class="iconfont icon-More"></i>
    </header>

    <!-- 内容区域 -->
    <section class="category-wrap"
             ref="categoryWrap">
      <!-- 左侧分类导航 -->
      <div class="nav-side-wrapper"
           ref="sidewrapper">
        <ul class="nav-side">
          <li :class="{ active : selectItem === index}"
              v-for="(item,index) in categoryList"
              :key="index"
              @click="handClickItem(index)">
            {{item.name}}
          </li>
        </ul>
      </div>
      <!-- 右侧商品数据 -->
      <div class="content-wrapper"
           ref="contentwrapper">
        <div class="content-slide">
          <img :src="contentData.mainImageUrl"
               class="category-main-img">
          <div class="category-list"
               v-for="( item,index) in contentData.list"
               :key="index">
            <p class="catogory-title">{{item.title}}</p>
            <div class="product-item"
                 v-for="( proItem, idx) in item.productList"
                 :key="idx">
              <img :src="proItem.imgUrl"
                   class="product-img">
              <p class="product-title">{{proItem.title}}</p>
            </div>

          </div>
        </div>
      </div>
    </section>

    <tabbar />
  </div>
</template>

<script>
import BScroll from "@better-scroll/core";
import tabbar from '../../components/tabbar';
import { getCategoryData } from "../../api/"
export default {

  // fetchCategory () {
  //   getcategoryData().then(res => {
  //     this.categoryData = res
  //     // 初始化better-scroll
  //     this.$nextTick(() => {
  //       new BScroll(this.$refs.sidewrapper, {})
  //       new BScroll(this.$refs.contentwrapper, {})
  //     });
  //   })
  // },
  data () {
    return {
      categoryList: [],
      selectItem: 0,
      contentData: {}


    };
  },
  components: {
    tabbar

  },
  created () {
    getCategoryData((res) => {
      console.log(res);
      this.categoryList = res.data
      if (this.categoryList.length > 0) {
        this.contentData = this.categoryList[0]

      }
    })

  },
  mounted () {
    //兼容手机
    // this.setSearchWrapHeight()
    // this.$nextTick(() => {
    //   new BScroll(this.$refs.sidewrapper, {})
    // });
    // this.$nextTick(() => {
    //   new BScroll(this.$refs.contentwrapper, {})
    // });
    console.log(this);

    this.$nextTick(function () {
      this.setWrapperHeight();

      //兼容 手机 浏览器 滚动效果 
      let wrapper = document.querySelector(".nav-side-wrapper");

      new BScroll(this.$refs.sidewrapper);
      new BScroll(this.$refs.contentwrapper);
    })
    // setTimeout(() => {
    //   this.setWrapperHeight();
    // }, 300)
  },
  methods: {
    gohome () {
      this.$router.push('/')
    },
    //固定 内容 容器高度 
    setWrapperHeight () {
      //获取 设备高度
      // console.log(window.screen.height);
      //获取 Header 高度 
      const headEleH = document.querySelector(".category-header").clientHeight;
      //计算 内容 高度 
      const contentH = window.screen.height - headEleH - 50;
      //固定 左侧内容高度
      this.$refs.sidewrapper.style.height = contentH + 'px';
      //固定 右侧内容高度
      this.$refs.categoryWrap.style.height = contentH + 'px';

      // const headEleH = document.querySelectNor(".category-header").clientHeight;
      // const contentH = window.screen.height - headEleH - 50;
      // this.$refs.sidewrapper.style.height = contentH + "px";
      // this.$refs.contentwrapper.style.height = contentH + "px";
      // let $screenHeight = document.documentElement.clientHeight
      // this.$refs.categoryWrap.style.height = $screenHeight - 100 + 'px'
    },
    //选中 左侧 列表选项
    handClickItem (index) {
      this.selectItem = index
      this.contentData = this.categoryList[index]

    }
    // fetchCategory () {
    //   getcategoryData().then(res => {
    //     this.categoryData = res
    //   })
    // },

  },

}
</script>
<style lang="scss" scoped>
@import "../../common/style/mixin.scss";
// 搜索栏样式
.category-header {
  position: fixed;
  left: 0;
  top: 0;
  @include fj;
  width: 100%;
  height: 100px;
  line-height: 100px;
  padding: 0 30px;
  @include boxSizing;
  font-size: 30px;
  color: #656771;
  z-index: 10000;

  &.active {
    background: $red;
  }

  .icon-left {
    font-size: 50px;
    font-weight: bold;
  }

  .header-search {
    display: flex;
    width: 80%;
    height: 40px;
    line-height: 40px;
    margin: 20px 0;
    padding: 10px 0;
    color: #232326;
    background: #f7f7f7;
    @include borderRadius(40px);

    .icon-search {
      padding: 0 20px 0 40px;
      font-size: 34px;
    }

    .search-title {
      font-size: 24px;
      color: #666;
    }
  }

  .icon-More {
    font-size: 40px;
  }
}
// 左侧分类列表
.category-wrap {
  @include fj;
  width: 100%;
  margin-top: 100px;
  background: #f8f8f8;
  border-top: 1px solid #999;

  .nav-side-wrapper {
    width: 28%;
    height: 100%;
    overflow: scroll;

    .nav-side {
      width: 100%;
      @include boxSizing;
      background: #f8f8f8;

      li {
        width: 100%;
        height: 92px;
        text-align: center;
        line-height: 92px;
        font-size: 28px;

        &.active {
          color: $red;
          background: #fff;
        }
      }
    }
  }
}
//右侧详情
.content-wrapper {
  width: 72%;
  height: 100%;
  overflow: scroll;

  .content-slide {
    width: 100%;
    padding: 0 20px;
    background: #fff;
    @include boxSizing;

    .category-main-img {
      width: 100%;
    }

    .category-list {
      display: flex;
      flex-wrap: wrap;
      flex-shrink: 0;
      width: 100%;

      .catogory-title {
        width: 100%;
        font-size: 34px;
        font-weight: 500;
        padding: 40px 0;
      }

      .product-item {
        width: 33.3333%;
        margin-bottom: 20px;
        text-align: center;
        font-size: 30px;

        img {
          width: 100%;
        }
      }
    }
  }
}
</style>